/*
 * @Description: 热卖商品卡片
 * @Author: kanglin
 * @Date: 2018-12-05 14:09:16
 * @Copyright: Created by Panxsoft.
 */

 <style lang="less" scoped rel="stylesheet/less" type="text/less" >
     @import '~src/assets/css/common.less';
    .v-com-bestsellers-product-card{
        width:288*@rem-per-px;
        height:416*@rem-per-px;
		background: #F9F9F9;
		box-shadow:0px 4*@rem-per-px 8*@rem-per-px rgba(35,41,49,0.08);
        .thumb{
            width: 100%;
            height: 288*@rem-per-px;
            &>img{
                width: 100%;
            }
        }
        .title{
            margin: 8*@rem-per-px 16*@rem-per-px 0;
            height: 68*@rem-per-px;
            font-size:24*@rem-per-px;
            line-height:34*@rem-per-px;
        }
        .currency{
            margin: 0 16*@rem-per-px;
            .price{
                height:48*@rem-per-px;
                font-size:32*@rem-per-px;
                font-weight:bold;
				line-height:48*@rem-per-px;
				color: #232931;
            }
        }

    }
 </style>

<template>
	<div class="v-com-bestsellers-product-card">
		<div class="thumb">
			<img
				v-lazy="src"
				alt="">
		</div>
		<div class="title multi-line-overflow">{{ title }}</div>
		<p class="currency">
			<small
				v-if="leftSymbol"
				class="unit">{{ leftSymbol }}</small>
			<span class="price">{{ price }}</span>
			<small
				v-if="rightSymbol"
				class="unit">{{ rightSymbol }}</small>
		</p>
	</div>
</template>

<script>
/**
* 热卖商品卡片组件
* @vue-prop {string} [src=null]	封面图片
* @vue-prop {String} [title='']	商品标题
* @vue-prop {string} [leftSymbol=''] 货币符号
* @vue-prop {string} [rightSymbol='] 货币符号
* @vue-prop {string} [price='0.00'] 商品价格
*/

export default {
	name: 'BestsellersProductCard',
	props: {
		src: {
			type: String,
			default() {
				return null;
			},
		},
		title: {
			type: String,
			default() {
				return '';
			},
		},
		leftSymbol: {
			type: String,
			default() {
				return '';
			},
		},
		rightSymbol: {
			type: String,
			default() {
				return '';
			},
		},
		price: {
			type: String,
			default() {
				return '0.00';
			},
		},
	},
	data() {
		return {
		};
	},
	methods: {},
};
</script>
